<template>
    <form class="form-container">
        <div>
            <div class="form-item">
                <label>接收人地址:</label>
                <div class="col-s-100 form-item-address">
                    <el-input placeholder=""></el-input>
                    <div class="fa fa-address" @click="linkman()"></div>
                </div>
            </div>
            <div class="form-item">
                <label>Amount:</label>
                <div class="col-s-100 form-item-float clearfix">
                    <div class="form-item-amount">
                        <el-input placeholder=""></el-input>
                    </div>
                    <div class="form-item-select">
                        <el-select v-model="value" placeholder="请选择" >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="form-item-select">
                        <el-select v-model="list" placeholder="请选择" >
                            <el-option
                                    v-for="item in lists"
                                    :key="item.list"
                                    :label="item.label"
                                    :value="item.list">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="form-item">
                <label>可选标签:</label>
                <div class="col-s-100">
                    <el-input placeholder=""></el-input>
                </div>
            </div>
            <el-button type="primary" class="btn-big btn-top">发送</el-button>
        </div>
    </form>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '1',
          label: 'i'
        }, {
          value: '2',
          label: 'o'
        }, {
          value: '3',
          label: 'p'
        }, {
          value: '4',
          label: 'a'
        }, {
          value: '5',
          label: 's'
        }],

        lists: [{
           list: '1',
           label: 'ETH'
        },{
           list: '2',
           label: 'CNY'
        }],
        value: '1',
        list: '1'
      }
    },
    methods:{
        linkman(){
            this.$router.push({path:'/home/linkman'})
        }
    }
  }
</script>


<style>
    .form-container label{
        margin-bottom: 20px;
        display: block;
        font-size: 15px;
    }
    .form-container .form-item{
        margin-bottom: 20px;
    }
    .form-container .col-s-100{
        position: relative;
    }
    .form-container .col-s-100 input{
        width: 100%;
        background: transparent;
        font-size: 14px;
    }
    .form-item-select{
        width: 120px;
        margin-left: 15px;
    }
    .form-container .form-item-address input{
        padding: 10px 40px 10px 10px;
    }
    .form-container .form-item-address .fa{
        position: absolute;
        right: 5px;
        top: 8px;
    }
    .fa-address{
        display: inline-block;
        width: 25px;
        height: 25px;
        background: url("../../assets/home/friends.png") no-repeat center;
        background-size: 100%;
        cursor: pointer;
    }
    .form-container .form-item .form-item-float > div{
        float: left;
    }
    .form-container .col-s-100 .form-item-amount input{
        width: 320px;
    }
    .btn-top{
        margin-top: 60px;
    }
</style>